{% extends "public/layout.html" %}

{% block css %}
    <link href="/static/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">
    <style>
        .ztree * {
            padding: 0;
            margin: 0;
            font-size: 16px;
        }

        #productinfo {
            width: 100%;
            height: 100%;
            display: none
        }

        #productinfo ul li {
            line-height: 45px;
            font-size: 16px;
        }

        #productinfo ul li label {
            display: inline-block;
            width: 100px;
            text-align: right;
            font-weight: bold;
            margin-right: 25px;
        }

        #productinfo ul li button {
            margin-left: 125px;
        }

        #modify {
            width: 100%;
            height: 100%;
            display: none
        }

    </style>
{% endblock %}

{% block body %}
    <div class="col-xs-3">
        <a type="button" class="btn btn-primary" href="{% url 'product_add' %}">添加</a>
        <div id="ztree" class="ztree"></div>
    </div>
    <div class="col-xs-9">
        <div id="productinfo">
            <ul class="list-unstyled">
                <li><label>业务线名称: </label><span id="info_service_name"></span></li>
                <li><label>上级业务线: </label><span id="info_pid"></span></li>
                <li><label>业务线简称: </label><span id="info_module_letter"></span></li>
                <li><label>业务负责人: </label><span id="info_dev_interface"></span></li>
                <li><label>运维负责人: </label><span id="info_op_interface"></span></li>
                <li>
                    <button type="button" class="btn btn-primary info_modify_btn">修改</button>
                </li>
            </ul>
        </div>
        <div id="modify">
            <form class="form-horizontal" role="form" parsley-validate id="basicvalidations"
                  method="post">
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">业务线名称 *</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="service_name"
                               autocomplete="off" id="input_service_name"
                               parsley-trigger="change" parsley-required="true"
                               parsley-minlength="2" parsley-validation-minlength="1">
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">上级业务线 *</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" readonly autocomplete="off"
                               id="input_pid" parsley-trigger="change" parsley-required="true"
                               parsley-minlength="2" parsley-validation-minlength="1">
                    </div>
                </div>


                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">业务线简称 *</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="module_letter"
                               autocomplete="off" id="input_module_letter"
                               parsley-trigger="change" parsley-required="true"
                               parsley-minlength="2" parsley-validation-minlength="1">
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">业务负责人 *</label>
                    <div class="col-sm-8">
                        <select data-placeholder="" multiple="选择联系人" tabindex="3"
                                name="dev_interface" id="input_dev_interface"
                                class="chosen-select form-control chosen-transparent">

                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="input_op_interface" class="col-sm-2 control-label">运维负责人
                        *</label>
                    <div class="col-sm-8">
                        <select data-placeholder="" multiple="选择联系人" tabindex="3"
                                name="op_interface" id="input_op_interface"
                                class="chosen-select form-control chosen-transparent">

                        </select>
                    </div>
                </div>
                <div class="form-group form-footer">
                    <div class="col-sm-offset-4 col-sm-8">
                        <button type="submit" id="submit_modify" class="btn btn-primary">提交
                        </button>
                        <button id="return_info" class="btn btn-default">返回</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="clear"></div>
        <div class="row">
            <ul class="list-inline" id="hostlist" style="display: block;"></ul>
        </div>
    </div>

    <div class="clear"></div>

{% endblock %}


{% block js %}
    <script type="text/javascript" src="/static/zTree_v3-master/js/jquery.ztree.core.js"></script>

    <script>
        var product_id;                                 // 当前点击的业务线id
        var productinfo_obj = $("#productinfo");        // 展示product的div

        // 展示product的字段
        var info_service_name_obj = $("#info_service_name");
        var info_pid_obj = $("#info_pid");
        var info_module_letter_obj = $("#info_module_letter");
        var info_dev_interface_obj = $("#info_dev_interface");
        var info_op_interface_obj = $("#info_op_interface");

        var info_modify_btn_obj = $(".info_modify_btn");

        var infomatioin_div = productinfo_obj;

        var modify_div = $("#modify");
        var input_service_name = $("#input_service_name");
        var input_pid = $("#input_pid");
        var input_module_letter = $("#input_module_letter");
        var input_dev_interface = $("#input_dev_interface");
        var input_op_interface = $("#input_op_interface");

        var submit_modify = $("#submit_modify");
        var return_info_btn = $("#return_info"); // 返回

        // 展示主机
        var hostlist = $("#hostlist");

        // 获取主机列表函数
        function show_hostlist() {
            $.get("/server/get/", {"server_purpose": id}, function (res) {
                $.each(res, function (n, obj) {
                    hostlist.append("<li>" + obj.fields.hostname + "（" + obj.fields.inner_ip + "）</li>");
                });
                hostlist.fadeIn("fast");
            })
        }


        // 获取用户列表函数
        function get_userlist_fun() {
            $.get("/server/product/manage/get/", {"id": product_id}, function (res) {
                if (res.status != 0) {
                    swal("错误", res.errmsg, "error")
                } else {
                    data = res.data;
                    users = res.u_email_lists;
                    info_service_name_obj.html(res.data.name);
                    info_pid_obj.html(res.data.p_product_id);
                    info_module_letter_obj.html(res.data.module_letter);
                    info_dev_interface_obj.html(res.data.dev_interface);
                    info_op_interface_obj.html(res.data.op_interface);

                }
            });
        }


        //
        function show_product_info() {
            productinfo_obj.hide();
            modify_div.hide();
            get_userlist_fun();
            productinfo_obj.fadeIn("fast")
        }


        function zTreeOnClick(event, treeId, treeNode) {
            //console.log(treeNode.tId + ", " + treeNode.name);
            product_id = treeNode.id;
            show_product_info()
        }

        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            callback: {
                onClick: zTreeOnClick
            },
            view: {
                fontCss: {fontSize: "16px"}
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = {{ znodes|safe }};

        $(function () {
            zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);

        });

        $(function () {
            // 点击修改按钮
            info_modify_btn_obj.click(function () {
                get_userlist_fun();
                infomatioin_div.hide();
                modify_div.fadeIn("fast");

                input_service_name.val(data.name);
                input_pid.val(data.p_product_id); // 显示上级业务线的名字
                input_module_letter.val(data.module_letter);

                var selected_dev_email = data.dev_interface.split(",");

                input_dev_interface.empty().chosen("destroy");

                var selected_op_email = data.op_interface.split(",");
                input_op_interface.empty().chosen("destroy");


                $.each(users, function (n, obj) {
                    var op_option;
                    var dev_option;

                    if ($.inArray(obj.email, selected_op_email) >= 0) {
                        op_option = '<option value="' + obj.email + '" selected>';
                    } else {
                        op_option = '<option value="' + obj.email + '">';
                    }
                    op_option += obj.email + ' | ' + obj.username + '</option>';
                    input_op_interface.append(op_option);

                    if ($.inArray(obj.email, selected_dev_email) >= 0) {
                        dev_option = '<option value="' + obj.email + '" selected>';
                    } else {
                        dev_option = '<option value="' + obj.email + '">';
                    }
                    dev_option += obj.email + ' | ' + obj.username + '</option>';
                    input_dev_interface.append(dev_option)

                });

                input_op_interface.chosen({
                    disable_search_threshold: 10,
                    no_results_text: "没有找到对应的记录"
                });
                input_dev_interface.chosen({
                    disable_search_threshold: 10,
                    no_results_text: "没有找到对应的记录"
                });
            });


            // 点击返回
            return_info_btn.click(function () {
                modify_div.hide();
                infomatioin_div.fadeIn("fast");
                return false

            });


            // 点击提交
            submit_modify.click(function () {
                var modify_data = {
                    "id": data.id,
                    'p_id': data.p_product_id_, // 上传上级业务线id
                    "name": input_service_name.val(),
                    "module_letter": input_module_letter.val(),
                    "dev_interface": input_dev_interface.val(),
                    "op_interface": input_op_interface.val()
                };
                $.post("#", modify_data, function (res) {
                    console.log(res);
                    if (res.status == 0) {
                        swal({
                            title: "操作成功",
                            text: "",
                            type: "success"
                        }, function () {
                            show_product_info()
                        })

                    } else {
                        swal('错误', res.errmsg, "error");
                    }
                });
                return false
            });

            $(".chosen-select").chosen({
                disable_search_threshold: 10,
                no_results_text: "没有找到对应的记录"
            });

        });


    </script>
{% endblock %}
